<div id="itemActionsBar">
  <% if (!redisReadOnly) { %>
  <button class="btn" data-toggle="modal" onclick="addHashField('<%= connectionId %>','<%= key %>')"
      style="margin-right: 5px">Add New Field...
  </button>
  <button class="btn btn-danger" onclick="deleteKey('<%= connectionId %>','<%= key %>')">Delete Key</button>
  <% } %>
  <button id="viewModeStringButton" class="btn" style="display:none;" onclick="dataUIFuncs.onModeStringButtonClick()">View mode string</button>
  <button id="viewModeJsonButton" class="btn" onclick="dataUIFuncs.onModeJsonButtonClick()">View mode tree</button>
</div>
<div id="itemData">
  <label>Key: <b><%= key %></b></label>
  <label>TTL: <b><%= ttl %></b></label>
  <label>Type: <b>Hash</b></label>
  <table class="table">
    <thead>
    <tr>
      <th>Field</th>
      <th colspan="2">Value</th>
    </tr>
    </thead>
    <tbody>
    <% for(var field in data) { %>
      <tr
        <% if (data[field] === null) { %>
          data-deferred-field="<%= field %>"
        <% } %>
        >
        <td><%= field %></td>
        <% console.log(field);%>
        <% console.log(data[field]);%>
        <td id="plain_<%= field %>" class="text-renderer"><%_ if (data[field] !== null) { _%>
<%= data[field] -%>
          <%_ } else { _%>
            <a data-deferred-field="<%= field %>">This is a large field. Click here to view.</a>
        <%_ } _%></td>
        <td id="jqtree_<%= field %>" class="json-renderer" style="display:none;">loading ...</td>
      </tr>
    <% } %>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    if (!redisReadOnly) {
      $('.table tbody tr').on('dblclick', function(event) {
        var connectionId = "<%= connectionId %>";
        var key = "<%= key %>";
        var row = event.currentTarget;
        if ('deferredField' in row.dataset) {
          console.log('Deferred fields are not editable')
          return;
        }
        var field = row.children[0].innerHTML.toString();
        var value = row.children[1].innerHTML.toString();
        editHashField(connectionId, key, field, value);
      });
    }

    $('.table tbody tr a[data-deferred-field]').on('click', function (event) {
      var connectionId = "<%= connectionId %>";
      var key = "<%= key %>";
      var field = event.target.dataset.deferredField;
      showHashField(connectionId, key, field);
    });

    dataUIFuncs.createJSONViews('td[class="json-renderer"]');
  });
</script>
